import React, { useState } from 'react';
import { XIcon, SlidersIcon } from 'lucide-react';
interface FilterOption {
  id: string;
  label: string;
}
interface FilterGroup {
  id: string;
  name: string;
  options: FilterOption[];
}
interface FilterSidebarProps {
  filters: FilterGroup[];
  selectedFilters: Record<string, string[]>;
  onFilterChange: (groupId: string, optionId: string, isSelected: boolean) => void;
  onClearFilters: () => void;
}
export const FilterSidebar = ({
  filters,
  selectedFilters,
  onFilterChange,
  onClearFilters
}: FilterSidebarProps) => {
  const [isMobileOpen, setIsMobileOpen] = useState(false);
  const handleFilterChange = (groupId: string, optionId: string, isChecked: boolean) => {
    onFilterChange(groupId, optionId, isChecked);
  };
  // Count total selected filters
  const totalSelectedFilters = Object.values(selectedFilters).reduce((total, selected) => total + selected.length, 0);
  const filterContent = <>
      <div className="flex justify-between items-center mb-6">
        <h3 className="font-nunito font-semibold text-lg">Filters</h3>
        {totalSelectedFilters > 0 && <button onClick={onClearFilters} className="text-sm text-terracotta hover:text-terracotta/80 transition-colors">
            Clear all
          </button>}
      </div>
      {filters.map(group => <div key={group.id} className="mb-6">
          <h4 className="font-medium mb-3 text-dark">{group.name}</h4>
          <div className="space-y-2">
            {group.options.map(option => {
          const isSelected = selectedFilters[group.id]?.includes(option.id) || false;
          return <label key={option.id} className="flex items-center cursor-pointer">
                  <input type="checkbox" checked={isSelected} onChange={e => handleFilterChange(group.id, option.id, e.target.checked)} className="rounded border-gray-300 text-terracotta focus:ring-terracotta/30 h-4 w-4" />
                  <span className="ml-2 text-sm">{option.label}</span>
                </label>;
        })}
          </div>
        </div>)}
    </>;
  return <>
      {/* Desktop sidebar */}
      <div className="hidden md:block w-64 flex-shrink-0">
        <div className="sticky top-24 pr-6 border-r border-gray-200">
          {filterContent}
        </div>
      </div>
      {/* Mobile filter button */}
      <div className="md:hidden">
        <button onClick={() => setIsMobileOpen(true)} className="fixed bottom-4 right-4 z-30 bg-terracotta text-white p-3 rounded-full shadow-lg flex items-center justify-center">
          <SlidersIcon size={20} />
          {totalSelectedFilters > 0 && <span className="absolute -top-1 -right-1 bg-yellow text-dark text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">
              {totalSelectedFilters}
            </span>}
        </button>
      </div>
      {/* Mobile filter sidebar */}
      {isMobileOpen && <div className="fixed inset-0 z-40 md:hidden">
          {/* Backdrop */}
          <div className="fixed inset-0 bg-black bg-opacity-50" onClick={() => setIsMobileOpen(false)}></div>
          {/* Sidebar */}
          <div className="fixed inset-y-0 right-0 max-w-xs w-full bg-white shadow-xl p-6 overflow-y-auto">
            <div className="flex justify-between items-center mb-6">
              <h3 className="font-nunito font-semibold text-lg">Filters</h3>
              <button onClick={() => setIsMobileOpen(false)} className="text-gray-500 hover:text-gray-700">
                <XIcon size={20} />
              </button>
            </div>
            {filterContent}
            <div className="mt-8">
              <button onClick={() => setIsMobileOpen(false)} className="w-full py-2.5 bg-terracotta text-white rounded-md hover:bg-terracotta/90 transition-colors font-medium">
                Apply Filters
              </button>
            </div>
          </div>
        </div>}
    </>;
};